<nav class="navbar navbar-expand-lg bg ps-3 pe-4 nav-purple-bg">
  <div class="container-fluid">
    <a routerLink="/">
      <img src="assets/elf.svg" class="logo" />
    </a>
    <div class="float-end">
      <ul class="collapse navbar-collapse navbar-nav">
        @for (item of navItems; track item) {
          <li class="nav-item ms-2">
            <a
              routerLinkActive="active"
              [routerLink]="item.link"
              class="nav-link"
              >{{ item.label }}</a
            >
          </li>
        }
      </ul>
    </div>
  </div>
</nav>
